<template>
  <div class="cash">
    <!-- 输入框表单 -->
    <el-form :inline="true" style="float: left">
      <el-form-item label="请输入桌号">
        <el-input v-model="food_table_number" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getOrderingFoodById">查询</el-button>
        <el-button type="warning" plain @click="billCheck" style="width: 160px">测试循环</el-button>
      </el-form-item>
    </el-form>
    <!-- 点餐数据表格 -->
    <el-table :data="orderingfood" border style="width: 100%">
      <el-table-column prop="food_table_number" label="餐桌编号" width="180">
      </el-table-column>
      <el-table-column prop="food_name" label="菜品名称" width="180">
      </el-table-column>
      <el-table-column prop="food_price" label="菜品单价" width="180">
      </el-table-column>
      <el-table-column prop="food_count" label="份数" width="180">
        <template slot-scope="food_count_scope">
          <el-input-number v-model="food_count_scope.row.food_count" :min="1" :max="10" size="mini"
            @change="foodCountChange">
          </el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="food_scope">
          <el-button type="text" @click="delOrderingFood(food_scope.row.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination small layout="prev, pager, next" :total="5"> </el-pagination>

    <div class="cash_todo">
      <h3>
        应收账款:<span>{{ bill }}</span>
      </h3>
      <el-input v-model="Actual_Collection" placeholder="实收" style="width: 160px"></el-input>
      <h3>
        找补:<span>{{ Actual_Collection - bill }}</span>
      </h3>
      <el-button type="warning" plain @click="ConfirmPayment" style="width: 160px">确认收款</el-button>
    </div>
  </div>
</template>

<style src="../style/cash.css">
</style>

<script>
import axios from "axios";
export default {
  data () {
    return {
      //收银处理post需要上传
      table_formInline: {
        food_table_id: "",
        foods: [],
      },

      //点餐数据
      //后端获取
      // orderingfood: [],
      //模拟点餐数据
      orderingfood: [
        {
          food_table_number: "001",
          food_id: "1",
          food_name: "番茄炒蛋",
          food_price: 25,
          food_count: 1,
        },
        {
          food_table_number: "001",
          food_id: "2",
          food_name: "土豆烧肉",
          food_price: 45,
          food_count: 1,
        },
        {
          food_table_number: "002",
          food_id: "2",
          food_name: "土豆烧肉",
          food_price: 45,
          food_count: 2,
        },
      ],

      //查询指定餐桌桌号
      food_table_number: "",

      // 实际收款
      Actual_Collection: "",
    };
  },
  computed: {
    // 应收账款
    bill: {
      get: function () {
        let sum = 0;
        console.log("数据长度", this.orderingfood.length);
        for (let i = 0; i < this.orderingfood.length; i++) {
          //确认应收账款
          let billCheck =
            this.orderingfood[i].food_price * this.orderingfood[i].food_count;
          console.log("账单", billCheck);
          sum = sum + billCheck;
        }
        console.log("应给款项", sum);
        // this.bill = sum;
        return sum;
      },
      set: function () { },
    },
  },
  methods: {
    // ===============================================================================后端获取数据方式
    // 接口测试
    ApiTest () {
      axios.get("http://124.220.177.66:8081/selectOrderingFood").then((res) => {
        console.log("查询所有点餐", res);
      }); //No
      axios
        .get("http://124.220.177.66:8081/selectOrderingFoodById", {
          params: {
            food_table_number: "0001",
          },
        })
        .then((res) => {
          console.log("查询指定餐桌点餐", res);
        }); //Yes
      axios
        .post("http://124.220.177.66:8081/deleteOrderingFoodById", {
          food_table_id: 1,
          foods: [],
        })
        .then((res) => {
          console.log("收银处理", res);
        }); //Yes
    },
    // 数据测试
    DataTest () {
      console.log("输入框输入餐桌num", this.food_table_number);
      console.log("查询餐桌id", this.orderingfood[0].food_id);
    },
    // 获取所有点餐----------已更改------cj
    getOrderingFood () {
      this.$cash.selectOrderingFood().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.orderingfood = res.data.data;
        }
      });
    },

    // 查询指定餐桌点餐
    getOrderingFoodById () {
      let tableNum = this.food_table_number;
      console.log(tableNum);
      this.$cash.selectOrderingFoodById(tableNum).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.orderingfood = res.data.data;
        }
      });
    },

    //改变菜品数量
    foodCountChange (foodCountValue) {
      console.log("点菜数量", foodCountValue);
    },

    //菜单菜品删除
    delOrderingFood (index) {
      this.orderingfood.splice(index, 1);
      this.table_formInline.foods;
    },

    // 应收款项
    billCheck () {
      let sum = 0;
      console.log("数据长度", this.orderingfood.length);
      for (let i = 0; i < this.orderingfood.length; i++) {
        //确认应收账款
        let billCheck =
          this.orderingfood[i].food_price * this.orderingfood[i].food_count;
        console.log("账单", billCheck);
        sum = sum + billCheck;
      }
      console.log("应给款项", sum);
      this.bill = sum;
    },
    // 确认收款
    ConfirmPayment () {
      // 后端需要表单数据
      // for (let i = 0; i++; i < this.orderingfood.length) {
      // this.table_formInline.foods[i].food_id.push(
      //   this.orderingfood[i].food_id
      // );
      // }
      // console.log(this.table_formInline);
      // this.$cash.deleteOrderingFoodById();
      // 跳转至点菜管理
      this.$router.push({
        path: "order",
        // query: {},
      });
    },
  },
  created () {
    // this.ApiTest();
    // this.DataTest();
    this.getOrderingFood();
    this.billCheck();
  },
  mounted () {
    //点餐页面结帐按钮路由跳转传过来一个餐桌编号
    // this.food_table_number = this.$route.query.food_table_number;
    // this.getOrderingFoodById();
  },
};
</script>

<style scoped lang="less">
</style>
